
<script setup>
import { ref, computed, onMounted } from 'vue'

// 当前查看的月份
const currentDate = ref(new Date())
const checkins = ref(new Set(['2025-03-06', '2025-03-07', '2025-03-08'])) // 模拟数据

// 星期标题
const weekDays = ['日', '一', '二', '三', '四', '五', '六']

// 月份切换
const changeMonth = (offset) => {
  const newDate = new Date(currentDate.value)
  newDate.setMonth(newDate.getMonth() + offset)
  currentDate.value = newDate
}

// 计算属性
const totalDays = computed(() => checkins.value.size)

const currentYear = computed(() => currentDate.value.getFullYear())
const currentMonth = computed(() => currentDate.value.getMonth() + 1)

const calendarWeeks = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const today = new Date()
  
  // 生成当月数据
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const days = []

  // 填充上月空白
  const startDay = firstDay.getDay()
  for(let i = 0; i < startDay; i++) {
    const date = new Date(year, month, 1 - (startDay - i))
    days.push({
      day: date.getDate(),
      date: formatDate(date),
      isCurrentMonth: false,
      isToday: false
    })
  }

  // 当月日期
  for(let i = 1; i <= lastDay.getDate(); i++) {
    const date = new Date(year, month, i)
    days.push({
      day: i,
      date: formatDate(date),
      isCurrentMonth: true,
      isToday: formatDate(date) === formatDate(today)
    })
  }

  // 填充下月空白
  const endDay = lastDay.getDay()
  for(let i = 1; i < 7 - endDay; i++) {
    const date = new Date(year, month + 1, i)
    days.push({
      day: date.getDate(),
      date: formatDate(date),
      isCurrentMonth: false,
      isToday: false
    })
  }

  // 按周分组
  const weeks = []
  for(let i = 0; i < days.length; i += 7) {
    weeks.push(days.slice(i, i + 7))
  }

  return weeks
})

// 工具函数
const formatDate = (date) => {
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}
</script>

<template>
  <view class="attendance-container">
    <!-- 统计区域 -->
    <view class="stats-box">
      <text class="stats-text">累计打卡</text>
      <text class="stats-number">{{ totalDays }}天</text>
    </view>

    <!-- 月份导航 -->
    <view class="month-nav">
      <uni-icons 
        type="left" 
        size="24" 
		@click="changeMonth(-1)" 
      />
      <text class="current-month">{{ currentYear }}年{{ currentMonth }}月</text>
      <uni-icons 
        type="right" 
        size="24" 
        @click="changeMonth(1)" 
      />
    </view>

    <!-- 日历表格 -->
    <view class="calendar-table">
      <!-- 星期标题 -->
      <view class="table-row header">
        <view 
          class="table-cell" 
          v-for="day in weekDays" 
          :key="day"
        >
          {{ day }}
        </view>
      </view>

      <!-- 日期内容 -->
      <view 
        class="table-row" 
        v-for="(week, index) in calendarWeeks" 
        :key="index"
      >
        <view 
          class="table-cell" 
          v-for="(day, dayIndex) in week" 
          :key="dayIndex"
          :class="{ 
            'current-month': day.isCurrentMonth,
            'checked': checkins.has(day.date),
            'today': day.isToday
          }"
        >
          <text class="date-num">{{ day.day }}</text>
          <uni-icons 
            v-if="checkins.has(day.date)" 
            type="checkmarkempty" 
            color="#07c160" 
            size="16" 
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.attendance-container {
  padding: 30rpx;
  background-color: #fff;
}

.stats-box {
  text-align: center;
  padding: 40rpx 0;
  .stats-text {
    font-size: 32rpx;
    color: #666;
    display: block;
  }
  .stats-number {
    font-size: 64rpx;
    color: #07c160;
    font-weight: bold;
  }
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  .current-month {
    font-size: 36rpx;
    color: #333;
    margin: 0 40rpx;
  }
}

.calendar-table {
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  overflow: hidden;
  margin-top: 20rpx;

  .table-row {
    display: flex;
    border-bottom: 1rpx solid #eee;

    &.header {
      background-color: #f8f8f8;
      font-weight: bold;
    }

    &:last-child {
      border-bottom: none;
    }

    .table-cell {
      flex: 1;
      min-height: 100rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10rpx;
      color: #666;
      
      &.current-month {
        color: #333;
      }
      
      &:not(.current-month) {
        background-color: #fafafa;
        color: #ccc;
      }

      &.checked {
        background-color: #e8fae8;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 8rpx;
          right: 8rpx;
          width: 16rpx;
          height: 16rpx;
          background: #07c160;
          border-radius: 50%;
        }
      }

      &.today {
        font-weight: bold;
        color: #007AFF;
      }

      .date-num {
        font-size: 32rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}
</style>